<template>
  <view class="m-list-search pad-top-10">
    <view class="m-list-search__box">
      <view :class="inputWidth">
        <m-input v-model:value="search" :config="inputConfig" @input="changeSearch">
          <view class="m-list-search__btn">
            <u-button text="搜索" size="small" color="#1876FF" @click.stop="handleSearch" shape="circle" />
          </view>
        </m-input>
      </view>
      <slot />
      <u--image
        @click="filter"
        v-if="props.search?.items && !hide"
        src="https://rm-zt-saaserp.oss-cn-beijing.aliyuncs.com/applet/static/img/filter.png"
        width="34"
        height="34"
      />
    </view>
  </view>
</template>
<!-- 过滤器，只返回查询字段 -->
<script setup lang="ts">
import { ref, computed, reactive } from 'vue';
const search = ref('');
const props = defineProps({ config: Object, search: Object });
// props
const placeholder = computed(() => props.config?.placeholder ?? '请输入查询条件');
const hide = computed(() => props.config?.hide ?? false);
const inputConfig = reactive({
  fontSize: 14,
  prefixIcon: 'search',
  placeholder,
  clearable: true,
  shape: 'circle',
  borderStyle: '4rpx solid #1876ff'
});
const inputWidth = computed(() => (props.search?.items ? 'm-list-search__input--min' : 'm-list-search__input--max'));
const emit = defineEmits(['filter', 'search', 'input']);
const filter = () => emit('filter');
//
function handleSearch() {
  emit('search', search.value);
}
function changeSearch(e) {
  emit('input', e);
}
</script>
<style lang="scss">
.m-list-search {
  width: 100%;
  height: 80rpx;
  &__box {
    width: 94%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &__btn {
    width: 120rpx;
    height: 50%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 25%;
    right: 4rpx;
    z-index: 999;
    > button {
      > text {
        font-size: 32rpx !important;
        letter-spacing: 2rpx;
        text-align: center;
      }
    }
  }
  &__input--max {
    width: 100%;
    height: 100%;
  }
  &__input--min {
    width: 90%;
    height: 100%;
  }
}
</style>
